<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Apple Music</title>
	<link rel="stylesheet" type="text/css" href="./css/base.css">
	<link rel="stylesheet" type="text/css" href="./css/music.css">
	<link rel="stylesheet" type="text/css" href="./css/header.css">
	<link rel="stylesheet" type="text/css" href="./css/footer.css">
</head>
<body>
	<div class="header">
		<div class="adv-wrapper">
			<div class="adv-wrapper-text">&lt;广告&gt;</div>
		</div>
		<div class="navbar">
			<ul class="navbar-icon">
						<li>
							<a href="mac-apple.html"><img src="img/svg/icon_image_large.svg"/></a>
						</li>
						<li>
							<a href="mac-apple.html">Mac</a>
						</li>
						<li>
							<a href="iphone-ipad.html">iPad</a>
						</li>
						<li>
							<a href="iphone-apple.html">iPhone</a>
						</li>
						<li>
							<a href="watch.html">Watch</a>
						</li>
						<li>
							<a href="music.html">Music</a>
						</li>
						<li>
							<a href="newtechnology.html">技术支持</a>
						</li>
						<li>
							<a href="#"><img src="img/svg/search_image_large.svg"/></a>
						</li>
						<li>
							<a href="#"><img src="img/svg/bag_image_large.svg"/></a>
						</li>
					</ul>
		</div>
		<div class="product">
			<ul>
				<li>
					<a href="#" class="product-icon">
						<figure>
							<img src="img/svg/iphone7_dark_large.svg" />
						</figure>
						<span>iPone 7</span>
						<span class="font-blue">新款</span>
					</a>
				</li>
				<li>
					<a href="#" class="product-icon">
						<figure>
							<img src="img/svg/iphone6s_dark_large.svg" />
						</figure>
						<span>iPone 6s</span>
					</a>
				</li>
				<li>
					<a href="#" class="product-icon">
						<figure>
							<img src="img/svg/iphonese_dark_large.svg" />
						</figure>
						<span>iPone SE</span>
					</a>
				</li>
				<li>
					<a href="#" class="product-icon">
						<figure>
							<img src="img/svg/iphone_ios_dark_large.svg" />
						</figure>
						<span>iOS 10</span>
					</a>
				</li>
				<li>
					<a href="#" class="product-icon">
						<figure>
							<img src="img/svg/iphone_acc_dark_large.svg" />
						</figure>
						<span>配件</span>
					</a>
				</li>
				<li>
					<a href="#" class="product-icon">
						<figure>
							<img src="img/svg/iphone_comp_dark_large.svg" />
						</figure>
						<span>机型比较</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="home">
		<div class="home-slogan">
			<div class="home-slogan-icon">Apple Music</div>
			<div class="home-slogan-text">Never stop playing.</div>
			<div class="home-slogan-free-link"><button>Try it free for three months*</button></div>
			<div class="home-slogan-more-link"><a href="">Learn more about Apple Music></a></div>
		</div>
	</div>
	<div class="main">
		<div class="content-container">
			<div class="full-content-item">
				<p class="content-title">
					Now on Apple Music
				</p>
				<div class="content-img">
					<img src="./img/music/family-0-large-1x.jpeg" alt="album" />
				</div>
				<div class="content-text">
					<p class="content-text-type">Album</p>
					<p class="content-text-name"><strong>Up Next:Khalid</strong></p>
					<a class="content-text-link" href="">Play it now with your free trial</a>
				</div>
			</div>
			<div class="content-item">
				<div class="half-content-item">
					<div class="content-img">
						<img src="./img/music/family-1-large-1x.jpg" alt="album" />
					</div>
					<div class="content-text">
						<p class="content-text-type">Album</p>
						<p class="content-text-name"><strong>Calvin Harris - Funk Wav Bounces</strong></p>
						<a class="content-text-link" href="">Play it now with your free trial</a>
					</div>
				</div>
				<div class="half-content-item">
					<div class="content-img">
						<img src="./img/music/family-2-large-1x.jpg" alt="album" />
					</div>
					<div class="content-text">
						<p class="content-text-type">Album</p>
						<p class="content-text-name"><strong>Washed Out - Mister Mellow</strong></p>
						<a class="content-text-link" href="">Play it now with your free trial</a>
					</div>
				</div>
			</div>
			<div class="content-item">
				<div class="half-content-item">
					<div class="content-img">
						<img src="./img/music/family-3-large-1x.jpg" alt="album" />
					</div>
					<div class="content-text">
						<p class="content-text-type">Album</p>
						<p class="content-text-name"><strong>Washed Out - Mister Mellow</strong></p>
						<a class="content-text-link" href="">Play it now with your free trial</a>
					</div>
				</div>
				<div class="half-content-item">
					<div class="content-img">
						<img src="./img/music/family-4-large-1x.jpg" alt="album" />
					</div>
					<div class="content-text">
						<p class="content-text-type">Album</p>
						<p class="content-text-name"><strong>Washed Out - Mister Mellow</strong></p>
						<a class="content-text-link" href="">Play it now with your free trial</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="card-homepod">
		<div class="card-slogan">
			<div class="card-slogan-icon">HomePod</div>
			<div class="card-slogan-text">The new sound of home.</div>
			<div class="card-slogan-more-link"><a href="">Learn more about HomePod></a></div>
		</div>
	</div>
	<div class="footer">
		<div class="foot-middle-content">
			<div class="foot-link-list">
				<div>
					<span class="icon-apple"><img src="img/svg/icon_large.svg"/></span>
					<span> > </span>
					<span> Music</span>
				</div>
				<div class="foot-link-list-content">
					<ul class="foot-list-box">
						<li>
							<ul>
								<li><h5>选购及了解</h5></li>
								<li><a href="#">Mac</a></li>
								<li><a href="#">iPad</a></li>
								<li><a href="#">iPhone</a></li>
								<li><a href="#">Watch</a></li>
								<li><a href="#">Music</a></li>
								<li><a href="#">iTunes</a></li>
								<li><a href="#">iPod</a></li>
								<li><a href="#">配件</a></li>
								<li><a href="#">App Store 充值卡</a></li>
							</ul>
						</li>
						<li>
							<ul>
								<li><h5>App Store 商店</h5></li>
								<li><a href="#">查找零售店</a></li>
								<li><a href="#">Genius Bar 天才吧</a></li>
								<li><a href="#">Today at Apple</a></li>
								<li><a href="#">Apple 夏令营</a></li>
								<li><a href="#">Field Trip 课外活动</a></li>
								<li><a href="#">Apple Store App</a></li>
								<li><a href="#">翻新和优惠</a></li>
								<li><a href="#">分期付款</a></li>
								<li><a href="#">重复使用和循环利用</a></li>
								<li><a href="#">订单状态</a></li>
								<li><a href="#">选购帮助</a></li>
							</ul>
						</li>
						<li>
							<ul>
								<li><h5>教育应用</h5></li>
								<li><a href="#">Apple 与教育</a></li>
								<li><a href="#">高校师生选购</a></li>
							</ul>
							<ul>
								<li><h5>商务应用</h5></li>
								<li><a href="#">Apple 与商务</a></li>
								<li><a href="#">商务选购</a></li>
							</ul>
						</li>
						<li>
							<ul>
								<li><h5>账户</h5></li>
								<li><a href="#">管理你的Apple ID</a></li>
								<li><a href="#">Apple Store 账户</a></li>
								<li><a href="#">iCloud.com</a></li>
								<li><a href="#"></a></li>
							</ul>
							<ul>
								<li><h5>Apple 价值观</h5></li>
								<li><a href="#">辅助功能</a></li>
								<li><a href="#">环境责任</a></li>
								<li><a href="#">隐私</a></li>
								<li><a href="#">供应商责任</a></li>
							</ul>
						</li>
						<li>
							<ul>
								<li><h5>关于 Apple</h5></li>
								<li><a href="#">Newsroom</a></li>
								<li><a href="#">Apple 管理层</a></li>
								<li><a href="#">工作机会</a></li>
								<li><a href="#">活动</a></li>
								<li><a href="#">联系 Apple</a></li>
							</ul>
						</li>
					</ul>
					<p>更多选购方式：前往 <a class="font-blue">Apple Store 零售店</a>，致电 400-666-8800 或查找在你附近的<a class="font-blue">授权经销商</a>。</p>
				</div>	
			</div>
			<div class="foot-copyright">
					<span>Copyright © 2017 Apple Inc. 保留所有权利。</span>
					<div class="illegel-info">
						<span>隐私政策</span>
						<span>|</span>
						<span>使用条款</span>
						<span>|</span>
						<span>销售政策</span>
						<span>|</span>
						<span>法律信息</span>
						<span>|</span>
						<span>网站地图</span>
					</div>
					<div class="country-info" title="请输入国家和地区">
						<img src="img/iphoneImg/china.png"/>
						<span>中国</span>
					</div>
				</div>
		</div>
	</div>
			<div class="backup" id="backup">
				<a href="#header" class="backup-icon">^</a> 
			</div>
		</div>
		<script type="text/javascript" src="js/backup.js" ></script>
</body>
</html>